/*
  学习目标：索引签名类型
  作用：允许添加任意的键值对
  场景：无法确定还有什么属性时
  注意：💥
    1. [键名: 类型] ： any。 值配合any使用
    2. 不要滥用，真的需要时采用

  解释:
    1. 使用 `[key: string]` 来约束该接口中允许出现的属性名称。表示只要是 string 类型的属性名称，都可以出现在对象中。
    2. 这样，对象 obj 中就可以出现任意多个属性(比如，a、b 等)。
    3. `key 只是一个占位符`，可以换成任意合法的变量名称。
    4. 隐藏的前置知识:`JS 中对象({})的键是 string 类型的`。
*/

type Person = {
  name: string;
  age: number;
  [key: string]: any;
};
const zs: Person = {
  name: '张三',
  age: 18,
};

zs.hobby = 'nv';
zs.genner = '男';
zs.color = '黄';

// React中接收任意props的用法
type AuthRouteProps = {
  path: string;
  // 模拟React组件
  component: any;
  // 表示接收任意的props
  [key: string]: any;
};
function AuthRoute(props: AuthRouteProps) {
  const { path, component, ...rest } = props;
  return null;
}
// <AuthRoute path='/' component={Layout}  title = '123'></AuthRoute>
AuthRoute({
  path: '/',
  component: 'Layout',
  title: 'tset',
});
